// <!-- 背景气泡 -->
const TOTAL = 40;
const MIN_DURATION = 18;
const MAX_DURATION = 35;

function createBubble(){
    const b = document.createElement('div');
    b.className = 'bg-bubble';
    const size = Math.random()*60 + 30;
    b.style.width  = size + 'px';
    b.style.height = size + 'px';
    b.style.left   = Math.random()*100 + 'vw';

    const duration = Math.random()*(MAX_DURATION-MIN_DURATION)+MIN_DURATION;
    const delay    = (Math.random()*-duration).toFixed(2);
    b.style.animation = `floatUp ${duration}s linear ${delay}s forwards`;

    document.body.appendChild(b);
    b.addEventListener('animationend',()=>{
        b.remove();
        createBubble();
    });
}
for(let i=0;i<TOTAL;i++) createBubble();




const input = document.getElementById('msgInput');
// 发送消息
function sendMassage() {
    const text = input.value.trim();    
    if(text){
        ws.send(text);
        addMessage('我', text, 'self');
        input.value = '';
    }
}
input.addEventListener('keydown',e=>{if(e.key==='Enter')sendMassage();});